<template>
	<view class="user">
		<u-navbar-home :bgColor="bgColor">
			<template #left>
				<view class="title u-flex-y-center" style="color: #fff">
					<u-image :src="logo" width="80rpx" height="80rpx"></u-image>
					<view style="width: 10rpx"> </view>
					山西饲草收储交易中心
				</view>
			</template>
		</u-navbar-home>
		<!-- @click="usertap" -->
		<view class="tcard">
			<view class=" u-flex-xy-center avatar">
				<u-avatar :src="user.avatar" size="60"></u-avatar>
			</view>
			<view v-if="!islogin" class="nologin" @click="usertap">
				<view class="text1">点击登陆</view>
				<view class="text2">登陆体验更多功能</view>
			</view>
			<view v-else class="nologin" @click="usertap">
				<view class="text1">{{ user.nickname }} {{ user.sex == 0 ?'':user.sex == 1 ? "男" : "女" }}</view>
				<view class="text2">{{ user.mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}</view>
			</view>
			<view class="u-flex-y-center" v-if="islogin" @click="usertap">
				<u-icon name="edit-pen" color="#fff" size="24"></u-icon>
			</view>
		</view>

		<!-- <view class="text" v-if="!islogin">未登陆</view> -->

		<view class="listcard z-card">
			<view class="title">
				我的功能
			</view>
			<view class="listitem" v-for="(item, index) in list" :key="index" @click="loginGoPage(item)">
				<view class="u-flex-y-center">
					<view class="img-box u-flex-xy-center">
						<u--image :showLoading="true" :src="item.src" width="50rpx" height="50rpx"></u--image>
					</view>
					<view class="text">
						{{ item.title }}
					</view>
				</view>
				<u-icon name="arrow-right" color="#ccc" size="14"></u-icon>
				<button class="kfbtn" open-type='contact' v-if="item.title=='联系客服'">
					open-type
				</button>
			</view>

		</view>


		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		getUser,
		updateUser,
		getAreaTree
	} from "@/api/user.js";

	import logo from "@/static/logo.png";
	import {
		getAccessToken,
		removeToken
	} from "@/utils/auth";
	import release from "./components/release.vue";
	import areaTree from "./components/areaTree.vue"
	import fb from "@/static/my/fb.png";
	import qd from "@/static/my/qd.png";
	import sc from "@/static/my/sc.png";
	import dh from "@/static/my/dh.png";
	import kf from "@/static/my/kf.png";
	export default {
		components: {
			release,
			areaTree
		},
		data() {
			return {
				bgColor: "#39C03E",
				logo,

				userInfo: {},
				user: {},
				list: [{
						title: "我的发布",
						src: fb,
						url: "/pages/my/release/release",
					},
					{
						title: "每日签到",
						src: qd,
						url: "/pages/points/points",
					},
					{
						title: "我的收藏",
						src: sc,
						url: "/pages/my/favorite/favorite",
					}, {
						title: "联系我们",
						src: dh,
						url: "/pages/my/callme/callme",
					},
					{
						src: kf,
						title: "联系客服",

					},
				],

				loading: false,
				show: false,
				islogin: false,
				columns: [
					["男", "女"]
				],
				btnstyle: {
					width: "300rpx",
				},
				areaTree: []

			};
		},
		created() {},
		onShow() {
			// this.$refs.release && 
			this.init();
		},
		mounted() {
			// this.init();
		},
		onReachBottom() {
			this.releaseGetdata();
		},
		methods: {
			loginGoPage(item) {
				if (item.title == '联系客服') {

					return
				}
				if (item.title == '联系我们') {
					uni.navigateTo({
						url: item.url,
					});
					return
				}
				if (!this.islogin) {
					uni.navigateTo({
						url: "/pages/login/login",
					});
					return
				}
				uni.navigateTo({
					url: item.url,
				});
			},
			showAreaTree(targetCode) {
				this.$refs.areaTree.showPickerFn(targetCode);
			},
			findAreaByCode(areaTree, targetCode) {
				let province = null;
				let city = null;
				let district = null;

				for (const provinceNode of areaTree) {
					if (provinceNode.children) {
						for (const cityNode of provinceNode.children) {
							if (cityNode.children) {
								for (const districtNode of cityNode.children) {
									if (districtNode.id === targetCode) {
										province = provinceNode.name;
										city = cityNode.name;
										district = districtNode.name;
										return `${province} ${city} ${district}`;
									}
								}
							}
						}
					}
				}

				return ''; // 如果未找到对应编码
			},
			async init() {
				let areaTree = await getAreaTree();
				this.areaTree = areaTree.data
				if (getAccessToken()) {
					try {
						let data = await getUser();
						if (data?.data) {
							this.user = data.data;
							this.islogin = true;
							this.$refs.release && this.$refs.release.init();
						} else {
							removeToken();
						}
					} catch {
						removeToken();
					}
				} else {
					removeToken();
					this.islogin = false;
					this.user = {

					};
				}

				// leftIcon
			},
			usertap() {
				if (!this.islogin) {
					uni.navigateTo({
						url: "/pages/login/login",
					});
				} else {
					uni.navigateTo({
						url: "/pages/my/info/info",
					});
				}
			},
			/* 跳转页面 */
			goPage(item) {
				uni.navigateTo({
					url: item.url,
				});
			},
			confirm(arr) {
				this.user.sex = arr.indexs[0];
				this.show = false;
			},
			async cancel() {
				this.show = false;
			},
			async onedit() {
				this.loading = true;
				await updateUser(this.user);
				this.loading = false;
				this.$u.toast("修改成功");
			},
			async releaseGetdata() {
				this.$refs.release && this.$refs.release.getData();
			},
		},
	};
</script>

<style>
	page {
		background: #f4f4f4;
	}
</style>

<style lang="scss" scoped>
	// .cygn {
	//   height: 40rpx;
	//   padding-left: 20rpx;
	//   font-size: 28rpx;
	//   font-weight: bold;
	// }

	.list-box {
		padding: 20rpx;
		justify-content: space-between;

		.item {
			display: flex;
			background: #fff;
			width: 345rpx;
			height: 100rpx;
			border-radius: 20rpx;
			padding: 20rpx;

			.left {
				flex: 1;
				width: 0;
				font-weight: bold;

				.img-box {
					margin-right: 10rpx;
				}
			}
		}
	}

	.user {
		background: linear-gradient(to bottom,
				#39c03e 0,
				#39c03e 188rpx,
				#f4f4f4 40vh);
		min-height: 100vh;

		.tcard {
			margin: 20rpx;
			display: flex;

			// align-items: center;
			.avatar {
				padding: 0 40rpx;
				// height: 200rpx;
				// padding: 60rpx 0;
				// flex-direction: column;

				.text {
					font-size: 28rpx;
					color: #333;
					margin-top: 10rpx;
					font-weight: bold;
				}
			}

			.nologin {
				flex: 1;

				.text1 {
					font-size: 28rpx;
					color: #fff;
					line-height: 50rpx;
				}

				.text2 {
					font-size: 24rpx;
					color: rgba($color: #fff, $alpha: 0.6);
				}
			}

			.sex {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.listcard {
			margin: 20rpx;
			margin-top: 100rpx;

			.title {
				font-size: 28rpx;
				color: #333;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				padding-top: 30rpx;
				height: 60rpx;
				font-weight: bold;
			}

			.listitem {
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 120rpx;
				position: relative;
				padding-right: 20rpx;

				.kfbtn {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					opacity: 0;
				}

				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 20rpx;
					right: 0;
					height: 1px;
					background: #f4f4f4;
				}

				.img-box {
					width: 90rpx;
					height: 90rpx;
				}

				.text {
					font-size: 24rpx;
				}
			}
		}
	}
</style>